<template>
  <div class="question-view">
    <div class="view-row">
      <el-row :gutter="20">
        <el-col :span="6">
          <span>【题型】:</span>
          <span>
            {{
              tableData.questionType === "1"
                ? "单选"
                : tableData.questionType === "2"
                ? "多选"
                : "简答"
            }}
          </span>
        </el-col>
        <el-col :span="6">
          <span>【编号】:</span>
          <span>{{ tableData.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>【难度】:</span>
          <span>{{
            tableData.difficulty === "1"
              ? "简单"
              : tableData.difficulty === "2"
              ? "一般"
              : "困难"
          }}</span>
        </el-col>
        <el-col :span="6">
          <span>【标签】:</span>
          <span>{{ tableData.tags }}</span>
        </el-col>
        <el-col :span="6" class="col">
          <span>【学科】:</span>
          <span>{{ tableData.subjectName }}</span>
        </el-col>
        <el-col :span="6" class="col">
          <span>【目录】:</span>
          <span>{{ tableData.directoryName }}</span>
        </el-col>
        <el-col :span="6" class="col">
          <span>【方向】:</span>
          <span>{{ tableData.direction }}</span>
        </el-col>
      </el-row>
    </div>
    <!-- 单选 -->
    <div class="view-row" v-if="tableData.questionType === '1'">
      <el-row>
        <el-row class="">【题干】:</el-row>
        <el-row class="textColor">{{
          tableData.question | html2Text(tableData.question)
        }}</el-row>
        <el-row>单选题选项: (以下选中的选项为正确答案)</el-row>
        <el-row class="checkbox-col">
          <el-radio-group v-model="radiobox" class="checkbox-col">
            <el-radio
              v-for="(item, index) in tableData.options"
              :key="index"
              :label="item.title"
            ></el-radio>
          </el-radio-group>
        </el-row>
      </el-row>
    </div>
    <!-- 多选 -->
    <div class="view-row" v-else-if="tableData.questionType === '2'">
      <el-row>
        <el-row class="">【题干】:</el-row>
        <el-row>{{
          tableData.question | html2Text(tableData.question)
        }}</el-row>
        <el-row>多选题选项: (以下选中的选项为正确答案)</el-row>
        <el-row class="checkboxs-col">
          <el-checkbox-group v-model="checkedbox" class="checkbox-col">
            <el-checkbox
              v-for="(item, index) in tableData.options"
              :key="index"
              :label="item.title"
            ></el-checkbox>
          </el-checkbox-group>
        </el-row>
      </el-row>
    </div>
    <!-- 简答 -->
    <div class="view-row" v-else>
      <el-row>
        <el-row class="">【题干】:</el-row>
        <el-row>{{
          tableData.question | html2Text(tableData.question)
        }}</el-row>
      </el-row>
    </div>
    <div class="view-row">
      <el-row>
        <el-col>
          <span>【参考答案】: </span>
          <span>
            <el-button
              type="danger"
              size="small"
              @click="vidioDialogTableVisible"
              >视频答案预览</el-button
            >
            <video
              ref="vie"
              muted
              width="320"
              height="240"
              controls
              autoplay
              class="video"
              :class="{ block: dialogTableVisible }"
            >
              <source :src="videoUrl" type="video/mp4" />
              <source :src="videoUrl" type="video/ogg" />
              <source :src="videoUrl" type="video/webm" />
              <object :data="videoUrl" width="320" height="240">
                <embed :src="videoUrl" width="320" height="240" />
              </object>
            </video>
          </span>
        </el-col>
      </el-row>
    </div>
    <div class="view-row">
      <el-row>
        <span>【答案解析】:</span>
        <span>{{ tableData.answer | html2Text(tableData.answer) }}</span>
      </el-row>
    </div>
    <div class="last-bottom">
      <el-row>
        <span>【题目备注】:</span>
        <span>{{ tableData.remarks }}</span>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionView',
  components: {},
  props: {
    tableData: {
      type: Object,
      required: true
    },
    checkedbox: {
      type: Array,
      required: true
    },
    radiobox: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      radio: '',
      checked: true,
      dialogTableVisible: false,
      videoUrl: ''
    }
  },
  computed: {},
  watch: {

  },
  created () {
    // this.checkedValue()
  },
  mounted () {

  },
  methods: {
    vidioDialogTableVisible () {
      this.videoUrl = this.tableData.videoURL
      this.dialogTableVisible = true
      this.$refs.vie.load()
    }
  }
}
</script>

<style lang="less" scoped>
.question-view {
  .view-row {
    border-bottom: 1px solid #c3c3c3;
    .el-row {
      margin: 10px;
    }
    // margin: 20px;
    .col {
      margin: 20px 0;
    }
  }
  .last-bottom {
    margin-top: 15px;
    margin-left: 10px;
  }
  .checkbox-col {
    display: flex;
    flex-direction: column;
    .el-radio {
      margin-bottom: 5px;
    }
    .el-checkbox {
      margin-bottom: 5px;
    }
  }
  .video {
    display: none !important;
    display: block;
    margin-top: 30px;
  }
  .block {
    display: block !important;
  }
  .textColor {
    color: #66b1ff;
  }
}
</style>
